<template>
<div class="list">
    <ul>
        <li v-for="item in sessions" :class="{ active: item.id === currentId }" @click="selectSession(item.id)">
            <template v-if="true">
                <img class="avatar"  width="30" height="30" :alt="item.user.name" :src="item.user.img">
                <p class="name">{{item.user.name}}</p>
            </template>
        </li>
    </ul>
</div>
</template>
<script>
//import { actions } from '../store';
const actions = null;

export default {
    vuex: {
        actions: actions,
        getters: {
            // 过滤后的会话列表
            sessions: ({ sessions, filterKey }) => {
                let result = sessions.filter(session => session.user.name.includes(filterKey));
                return result;
            },
            // 当前会话index
            currentId: ({ sessions , currentSessionId , username}) => {
                var response = sessions.filter(session => session.id === currentSessionId);
                var others = sessions.filter(session => session.id !== currentSessionId);
                username = response[0].user.name;                
                sessions = [...response , ...others];
                return currentSessionId;
            },
            session : (state) => state.session
        }
    }
};
</script>
<style scoped lang="less">
.list {
    li {
        padding: 12px 15px;
        border-bottom: 1px solid #292C33;
        cursor: pointer;
        transition: background-color .1s;

        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        &.active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
    .avatar, .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
    }
}
</style>